<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            padding: 5px;
            background-color:skyblue;
        }
        .box2{
            background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px; 
            background-color: peru;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- vue中的事件修饰符：
        1、prevent:阻止默认事件
        2、stop：阻止事件冒泡（常用）
        3、once：事件只触发一次（常用）
        4、capture：使用事件的捕获模式
        5、self:只有event.target是当前操作的元素才触发事件
        6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕
    -->
    <div id="root">
        <h2>欢迎来到 {{name}} 做客</h2>
        <!-- 阻止默认事件 -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
        <!-- 阻止事件冒泡 -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
        <!-- 事件只触发一次 -->
        <div class="demo1">
            <button @click.once="showInfo">点我提示信息</button>
        </div>
        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            box1
            <div class="box2" @click="showMsg(2)">
                box2
            </div>
        </div>
        <!-- 只有event.target是当前操作的元素时才触发操作 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>
        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <div>
            <ul @wheel.passive="demo" class="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        
    </div>
</body>
<script type="text/javascript">
     Vue.config.productionTip = false

     const vm = new Vue({
         el:'#root',
         data(){
             return{
                 name:'beijing'
             }
         },
         methods:{
             showInfo(e){
                //  e.preventDefault();
                alert('huanying');
                console.log(e.target);

             },
             showMsg(msg){
                console.log(msg)
             },
             demo(){
                 for(let i =0;i<1000;i++){
                     console.log("#")
                 };
                 console.log('@')
             }

         }
     })

</script>

</html>